<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@include file="../../../common/import-tags.jspf"%>
<sys:welcomeHeader title="基础框架" />
<link type="text/css" href="${ctx}/static/sys/welcome/index/css/index.css" rel="stylesheet">
<div id="page-top" data-spy="scroll" data-target=".navbar-custom">
	<!-- Preloader -->
	<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
		<div class="container">
			<div class="navbar-header page-scroll">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target=".navbar-main-collapse">
					<i class="fa fa-bars"></i>
				</button>
				<a class="navbar-brand" href="index.html">
					<h1>SQUAD FREE</h1>
				</a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div
				class="collapse navbar-collapse navbar-right navbar-main-collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#intro">Home</a></li>
					<li><a href="#about">About</a></li>
					<li><a href="#service">Service</a></li>
					<li><a href="#contact">Contact</a></li>
					<li class="dropdown"><a href="#" class="dropdown-toggle"
						data-toggle="dropdown">Dropdown <b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="#">Example menu</a></li>
							<li><a href="#">Example menu</a></li>
							<li><a href="#">Example menu</a></li>
						</ul></li>
				</ul>
				<!-- 用户信息 -->
				<c:choose>
					<c:when test="${not empty userName}">
						<p class="navbar-text">
						   <a href="#">${userName } </a>
						   <a href="${ctx }/admin/index">管理</a>
						   <a href="${ctx}/login/out">退出</a>
						</p>
					</c:when>
					<c:otherwise>
						<p class="navbar-text"><a href="${ctx}/login/index">登陆</a></p>
					</c:otherwise>
				</c:choose>
			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container -->
	</nav>

	<!-- Section: intro -->
	<section id="intro" class="intro">

		<div class="slogan">
			<h2>
				WELCOME TO <span class="text_color">SQUAD</span>
			</h2>
			<h4>WE ARE GROUP OF GENTLEMEN MAKING AWESOME WEB WITH BOOTSTRAP</h4>
		</div>
		<div class="page-scroll">
			<a href="#service" class="btn btn-circle"> <i
				class="fa fa-angle-double-down animated"></i>
			</a>
		</div>
	</section>
	<!-- /Section: intro -->

	<!-- Section: about -->
	<section id="about" class="home-section text-center">
		<div class="heading-about">
			<div class="container">
				<div class="row">
					<div class="col-lg-8 col-lg-offset-2">
						<div class="wow bounceInDown" data-wow-delay="0.4s">
							<div class="section-heading">
								<h2>About us</h2>
								<i class="fa fa-2x fa-angle-down"></i>

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="container">

			<div class="row">
				<div class="col-lg-2 col-lg-offset-5">
					<hr class="marginbot-50">
				</div>
			</div>
			<div class="row">
				<div class="col-xs-6 col-sm-3 col-md-3">
					<div class="wow bounceInUp" data-wow-delay="0.2s">
						<div class="team boxed-grey">
							<div class="inner">
								<h5>Anna Hanaceck</h5>
								<p class="subtitle">Pixel Crafter</p>
								<div class="avatar">
									<img src="${ctx}/static/images/welcome/team/1.jpg" alt=""
										class="img-responsive img-circle" />
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xs-6 col-sm-3 col-md-3">
					<div class="wow bounceInUp" data-wow-delay="0.5s">
						<div class="team boxed-grey">
							<div class="inner">
								<h5>Maura Daniels</h5>
								<p class="subtitle">Ruby on Rails</p>
								<div class="avatar">
									<img src="${ctx}/static/images/welcome/team/2.jpg" alt=""
										class="img-responsive img-circle" />
								</div>

							</div>
						</div>
					</div>
				</div>
				<div class="col-xs-6 col-sm-3 col-md-3">
					<div class="wow bounceInUp" data-wow-delay="0.8s">
						<div class="team boxed-grey">
							<div class="inner">
								<h5>Jack Briane</h5>
								<p class="subtitle">jQuery Ninja</p>
								<div class="avatar">
									<img src="${ctx}/static/images/welcome/team/3.jpg" alt=""
										class="img-responsive img-circle" />
								</div>

							</div>
						</div>
					</div>
				</div>
				<div class="col-xs-6 col-sm-3 col-md-3">
					<div class="wow bounceInUp" data-wow-delay="1s">
						<div class="team boxed-grey">
							<div class="inner">
								<h5>Tom Petterson</h5>
								<p class="subtitle">Typographer</p>
								<div class="avatar">
									<img src="${ctx}/static/images/welcome/team/4.jpg" alt=""
										class="img-responsive img-circle" />
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- /Section: about -->


	<!-- Section: services -->
	<section id="service" class="home-section text-center bg-gray">

		<div class="heading-about">
			<div class="container">
				<div class="row">
					<div class="col-lg-8 col-lg-offset-2">
						<div class="wow bounceInDown" data-wow-delay="0.4s">
							<div class="section-heading">
								<h2>Our Services</h2>
								<i class="fa fa-2x fa-angle-down"></i>

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div class="col-lg-2 col-lg-offset-5">
					<hr class="marginbot-50">
				</div>
			</div>
			<div class="row">
				<div class="col-sm-3 col-md-3">
					<div class="wow fadeInLeft" data-wow-delay="0.2s">
						<div class="service-box">
							<div class="service-icon">
								<img src="${ctx}/static/images/welcome/icons/service-icon-1.png" alt="" />
							</div>
							<div class="service-desc">
								<h5>Print</h5>
								<p>Vestibulum tincidunt enim in pharetra malesuada. Duis
									semper magna metus electram accommodare.</p>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-3 col-md-3">
					<div class="wow fadeInUp" data-wow-delay="0.2s">
						<div class="service-box">
							<div class="service-icon">
								<img src="${ctx}/static/images/welcome/icons/service-icon-2.png" alt="" />
							</div>
							<div class="service-desc">
								<h5>Web Design</h5>
								<p>Vestibulum tincidunt enim in pharetra malesuada. Duis
									semper magna metus electram accommodare.</p>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-3 col-md-3">
					<div class="wow fadeInUp" data-wow-delay="0.2s">
						<div class="service-box">
							<div class="service-icon">
								<img src="${ctx}/static/images/welcome/icons/service-icon-3.png" alt="" />
							</div>
							<div class="service-desc">
								<h5>Photography</h5>
								<p>Vestibulum tincidunt enim in pharetra malesuada. Duis
									semper magna metus electram accommodare.</p>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-3 col-md-3">
					<div class="wow fadeInRight" data-wow-delay="0.2s">
						<div class="service-box">
							<div class="service-icon">
								<img src="${ctx}/static/images/welcome/icons/service-icon-4.png" alt="" />
							</div>
							<div class="service-desc">
								<h5>Cloud System</h5>
								<p>Vestibulum tincidunt enim in pharetra malesuada. Duis
									semper magna metus electram accommodare.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- /Section: services -->




	<!-- Section: contact -->
	<section id="contact" class="home-section text-center">
		<div class="heading-contact">
			<div class="container">
				<div class="row">
					<div class="col-lg-8 col-lg-offset-2">
						<div class="wow bounceInDown" data-wow-delay="0.4s">
							<div class="section-heading">
								<h2>Get in touch</h2>
								<i class="fa fa-2x fa-angle-down"></i>

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="container">

			<div class="row">
				<div class="col-lg-2 col-lg-offset-5">
					<hr class="marginbot-50">
				</div>
			</div>
			<div class="row">
				<div class="col-lg-8">
					<div class="boxed-grey">
						<form id="contact-form">
							<div class="row">
								<div class="col-md-6">
									<div class="form-group">
										<label for="name"> Name</label> <input type="text"
											class="form-control" id="name" placeholder="Enter name"
											required="required" />
									</div>
									<div class="form-group">
										<label for="email"> Email Address</label>
										<div class="input-group">
											<span class="input-group-addon"><span
												class="glyphicon glyphicon-envelope"></span> </span> <input
												type="email" class="form-control" id="email"
												placeholder="Enter email" required="required" />
										</div>
									</div>
									<div class="form-group">
										<label for="subject"> Subject</label> <select id="subject"
											name="subject" class="form-control" required="required">
											<option value="na" selected="">Choose One:</option>
											<option value="service">General Customer Service</option>
											<option value="suggestions">Suggestions</option>
											<option value="product">Product Support</option>
										</select>
									</div>
								</div>
								<div class="col-md-6">
									<div class="form-group">
										<label for="name"> Message</label>
										<textarea name="message" id="message" class="form-control"
											rows="9" cols="25" required="required" placeholder="Message"></textarea>
									</div>
								</div>
								<div class="col-md-12">
									<button type="submit" class="btn btn-skin pull-right"
										id="btnContactUs">Send Message</button>
								</div>
							</div>
						</form>
					</div>
				</div>

				<div class="col-lg-4">
					<div class="widget-contact">
						<h5>Main Office</h5>

						<address>
							<strong>Squas Design, Inc.</strong><br> Tower 795 Folsom
							Ave, Beautiful Suite 600<br> San Francisco, CA 94107<br>
							<abbr title="Phone">P:</abbr> (123) 456-7890
						</address>

						<address>
							<strong>Email</strong><br> <a href="mailto:#">email.name@example.com</a>
						</address>
						<address>
							<strong>We're on social networks</strong><br>
							<ul class="company-social">
								<li class="social-facebook"><a href="#" target="_blank"><i
										class="fa fa-facebook"></i></a></li>
								<li class="social-twitter"><a href="#" target="_blank"><i
										class="fa fa-twitter"></i></a></li>
								<li class="social-dribble"><a href="#" target="_blank"><i
										class="fa fa-dribbble"></i></a></li>
								<li class="social-google"><a href="#" target="_blank"><i
										class="fa fa-google-plus"></i></a></li>
							</ul>
						</address>

					</div>
				</div>
			</div>

		</div>
	</section>
	<!-- /Section: contact -->
	<%@include file="../common/footer.jsp" %>
</div>
<sys:welcomeFooter />
<script type="text/javascript" src="${ctx }/static/sys/welcome/common/js/main.js"></script>
<script type="text/javascript" src="${ctx }/static/sys/welcome/index/js/index.js"></script>
